goog.provide('discoinferno.ui.QuestionPane');

goog.require('goog.dom');
goog.require('goog.events');

discoinferno.ui.QuestionPane = function(question, timer, callbackFunction) {
  //Question object holding question
  this.question = question;

  //DOM element representing question
  this.element = this.generateElement_();

  //Timer
  this.timer = timer;
  this.timer.setInterval(3000);

  this.callbackFunction = callbackFunction;

  //For random selection
  this.remainingCorrectAnswers = [0, 1, 2, 3];
  goog.array.remove(this.remainingCorrectAnswers, this.question.correctAnswerIndex);

  goog.events.listen(this.timer, goog.Timer.TICK, this.fadeRandomAnswer, false, this);
};

discoinferno.ui.QuestionPane.prototype.generateElement_ = function() {
  var questionTextDom = goog.dom.createDom('div', {'id': 'question', 'style':'font-size: 52px;'}, this.question.questionText);
  var questionAnswersDom = goog.dom.createDom('ol', {'id': 'answer-choices'});
  listItems = [];
  anchors = [];
  images = [];
  for(var i = 0; i < 4; i++) {
    images[i] = goog.dom.createDom('img', {'id': 'image'+i, 'src': this.question.answerList[i]});
    anchors[i] = goog.dom.createDom('a', {'href': 'javascript:chooseAnswer(' + i + ')'}, images[i]);
    listItems[i] = goog.dom.createDom('li', {'id': 'choice'+i, 'class': 'choice'}, anchors[i]);
    goog.dom.appendChild(questionAnswersDom, listItems[i]);
  }
  return goog.dom.createDom('div', {'id': 'question-content'}, questionTextDom, questionAnswersDom);
};
//gray out a random answer
discoinferno.ui.QuestionPane.prototype.fadeRandomAnswer = function() {
  
  if (this.remainingCorrectAnswers.length == 0) {
    goog.events.removeAll(this.timer);
    goog.dom.removeNode(this.element);
    this.callbackFunction();
    return;
  }

  var randomIndex = Math.floor(this.remainingCorrectAnswers.length * Math.random());
  this.grayOut(this.remainingCorrectAnswers[randomIndex]);
  goog.array.removeAt(this.remainingCorrectAnswers, randomIndex);
  
  if (this.remainingCorrectAnswers.length == 0)
    goog.dom.classes.set(goog.dom.getElement('image'+this.question.correctAnswerIndex), 'right');
}
//gray out selected answer
discoinferno.ui.QuestionPane.prototype.grayOut = function(answerIndex) {
  var imageDom = goog.dom.getElement('image' + answerIndex);
  goog.dom.classes.set(imageDom, 'dim');
};

//listener for selecting answer by hand
discoinferno.ui.QuestionPane.prototype.chooseAnswer = function(answerIndex) {
  this.timer.stop();
  var correct = answerIndex == this.question.correctAnswerIndex;
  if(correct) {
    //get system time
  }
};

//var a = new QuestionPane(question object);
//a.generateElement_();
